<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        height: 3000px;
      }

      .aside {
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      .item {
        height: 40px;
        line-height: 40px;
        text-align: center;
        padding: 0 10px;
        cursor: pointer;
      }

      .active {
        background-color: red;
        color: #fff;
      }

      .content {
        width: 660px;
        margin: 400px auto;
      }

      .neirong {
        height: 300px;
        margin-bottom: 20px;
        color: #fff;
      }

      .content1 {
        background-color: red;
      }

      .content2 {
        background-color: blue;
      }

      .content3 {
        background-color: orange;
      }

      .content4 {
        background-color: yellowgreen;
      }
    </style>
  </head>

  <body>
    <div class="aside">
      <div class="item active" data-id="1">男装/女装</div>
      <div class="item" data-id="2">儿童服装/游乐园</div>
      <div class="item" data-id="3">电子产品</div>
      <div class="item" data-id="4">电影/美食</div>
    </div>

    <div class="content">
      <div class="neirong content1">男装/女装</div>
      <div class="neirong content2">儿童服装/游乐园</div>
      <div class="neirong content3">电子产品</div>
      <div class="neirong content4">电影/美食</div>
    </div>

    <script>
      const aside = document.querySelector('.aside')
      const content1= document.querySelector('.content1');
      const content2= document.querySelector('.content2');
      const content3= document.querySelector('.content3');
      const content4= document.querySelector('.content4');
      aside.addEventListener('click', function (e) {
        if ((e.target.tagName = 'DIV')) {
          
          const active=document.querySelector('.aside .active')
          if(active)active.classList.remove('active')
          e.target.classList.add('active')
          const id = e.target.dataset.id

          document.documentElement.scrollTo(
            0,
            document.querySelector(`.content${id}`).offsetTop
          )
        }
      })
      window.addEventListener('scroll', function () {
        const n = document.documentElement.scrollTop
        const active=document.querySelector('.aside .active')
          if(active)active.classList.remove('active')
        if(n>=content1.offsetTop&&n<content2.offsetTop){
            document.querySelector(`.item:nth-child(1)`).classList.add('active');
        }else if(n>=content2.offsetTop&&n<content3.offsetTop){
          document.querySelector(`.item:nth-child(2)`).classList.add('active');
        
        }else if(n>=content3.offsetTop&&n<content4.offsetTop){
          document.querySelector(`.item:nth-child(3)`).classList.add('active');
          
        }else if(n>=content4.offsetTop) {
          document.querySelector(`.item:nth-child(4)`).classList.add('active');


        }
      })

    </script>
  </body>
</html>
